<template>
	<view class="container">
		<view class="userAvar">
			<!-- <image src="" mode=""></image> -->
			<view class="topHeacd"></view>
			<view class="biaoti f f-a-c p-l-40">
				<image :src="obj.shop.logo" class="avar m-r-10" mode=""></image>
				<view @click="shangyu" class="name">
					{{obj.shop.name?obj.shop.name:'请选择'}}
				</view>
			</view>
		</view>
		<!-- 轮播图功能部分 -->
		<view class="swip">
			<view class="swipTop m-0-a f f-a-c f-j-b">
				<view class="swipLeft">
					<input type="text" v-model="booksValue" placeholder="请输入书籍名称进行搜索" @confirm="givMi" class="sceh "
						name="" id="">
					<image src="/static/home/sceh.png" class="duihao" mode=""></image>
				</view>
				<image @click="bigSmall" src="/static/home/10.png" class="swipRight" mode=""></image>
			</view>
			<!-- 通知 -->
			<view @click="notification" class="notification m-0-a">
				<u-notice-bar type="success" mode="vertical" :list="list"></u-notice-bar>
			</view>
			<!-- 下面的轮播图 -->
			<view class="swipImg m-0-a m-b-25">
				<u-swiper height="100%" @click="swips" :list="listImg"></u-swiper>
			</view>
			<!-- 下面的热门分类 -->
			<view class="categories m-b-25">
				热门分类
			</view>
			<!-- 分类 -->
			<view class="tabBar m-t-25 f f-a-c f-j-e f-w-w">
				<view v-for="(item,index) in navList" :key="index" @click="tabBarSwi(index)"
					class="item f f-d-c f-a-c f-j-c">
					<image :src="item.image" :style="{'width':'76rpx','height':'82rpx','margin-top':'0rpx'}"
						class="fenImg" mode="">
					</image>
					<view class="nameSwip m-t-20">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 下面的扫码借书 -->
			<view class="scanTheCode f f-a-c f-j-b m-0-a m-b-25">
				<view @click="CodetoBorrow" class="codeLeft f f-a-c f-j-b m-r-25 p-20">
					<view class="f f-a-c ">
						<image src="/static/home/22.png" class="codeImg m-r-20" mode=""></image>
						<view class="cenName">
							<view class="books">
								扫码借书
							</view>
							<view class="fast m-t-10">
								方便快捷
							</view>
						</view>
					</view>
					<image src="/static/home/11.png" class="rightImg" mode=""></image>
				</view>
				<view @click="BorrowingRules" class="codeRight f f-a-c f-j-b p-20">
					<view class="f f-a-c ">
						<image src="/static/home/23.png" class="codeImg m-r-20" mode=""></image>
						<view class="cenName">
							<view class="books">
								借阅规则
							</view>
							<view class="fast m-t-10">
								知晓规则快一步
							</view>
						</view>
					</view>
					<image src="/static/home/11.png" class="rightImg" mode=""></image>
				</view>
			</view>
			<view class="bg"></view>
		</view>
		<!-- 下面的切换 门店活动 -->
		<view class="storeActivity m-t-35 p-t-20 p-b-20">
			<view class="topName m-0-a">
				门店活动
			</view>
			<view class="tabQie m-0-a m-t-35 p-10 f f-a-c f-j-b m-b-25">
				<view class="tabItem  f f-a-c f-j-c" @click="qieHuan(1)" :class="{active:ind==1}">
					秒杀
				</view>
				<view class="tabItem f f-a-c f-j-c" @click="qieHuan(2)" :class="{active:ind==2}">
					拼团
				</view>
			</view>
			<!-- /下面的内容分 HeGroupList-->
			<view class="tabCount m-0-a">
				<view v-for="(item,index) in heGroupList" @click="stoerAct(item)" :key="index"
					class="countItem p-b-20 m-b-20">
					<view class="f f-a-c">
						<!-- 线 -->
						<view class="xian m-r-10"></view>
						<view class="title">
							{{item.name}}
						</view>
					</view>
					<view class="time m-t-10">
						时间：{{item.start_at}} ~ {{item.end_at}}
					</view>
				</view>
			</view>
		</view>
		<!-- 家长课堂 -->
		<view class="parenClass m-t-25 p-t-20 p-b-20">
			<view class="homeTit m-0-a f f-a-c f-j-b">
				<view class="topName m-0-a">
					品牌动态
				</view>
				<!-- 	<view class="rig f f-a-c f-j-b">
					查看更多<image src="/static/home/11.png" class="rightJian m-l-10" mode=""></image>
				</view> -->
			</view>
			<view class="rightSlide f f-a-c m-t-20">
				<view v-for="(item,index) in parentList" @click="parent(item)" :key="index" class="slideItem">
					<view class="bgImg">
						<!-- <image :src="item.cover" class="bgImgsss" mode="aspectFill"></image> -->
						<image :src="item.cover" class="bgImgsss" mode=""></image>

					</view>
					<view class="botBtn">
						<view class="online o-f-2 m-t-10">
							{{item.title}}
						</view>
						<view class="intro m-t-10">
							简介：{{item.intro}}
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 下面的好书推荐 -->
		<AhomeItem name="好书上新" :list="newBooksList" :num="1"></AhomeItem>
		<AhomeItem name="好书推荐" :list="booksList" :num="2"></AhomeItem>
	</view>
</template>

<script>
	import AhomeItem from "@/components/AhomeItem.vue"
	export default {
		components: {
			AhomeItem
		},
		data() {
			return {
				booksValue: '',
				newBooksList: [],
				booksList: [], //推荐书籍列表
				parentList: [], //家长课堂
				heGroupList: [], //秒杀活动拼团列表
				obj: {},
				ind: 1,
				navList: [{
						name: '主题书单',
						img: '/static/home/14.png',
						width: '60rpx',
						height: '90rpx',
						top: '0rpx'
					},
					{
						name: '英文读物',
						img: '/static/home/17.png',
						width: '64rpx',
						height: '86rpx',
						top: '4rpx'
					},
					{
						name: '小学书单',
						img: '/static/home/15.png',
						width: '64rpx',
						height: '88rpx',
						top: '2rpx'
					},
					{
						name: '好友推荐',
						img: '/static/home/16.png',
						width: '76rpx',
						height: '82rpx',
						top: '8rpx'
					},
					{
						name: '绘本故事',
						img: '/static/home/21.png',
						width: '94rpx',
						height: '82rpx',
						top: '8rpx'
					},
					{
						name: '教育启蒙',
						img: '/static/home/18.png',
						width: '66rpx',
						height: '86rpx',
						top: '4rpx'
					},
					{
						name: '获奖作品',
						img: '/static/home/20.png',
						width: '70rpx',
						height: '92rpx',
						top: '-2rpx'
					},
					{
						name: '父母陪读',
						img: '/static/home/19.png',
						width: '66rpx',
						height: '88rpx',
						top: '2rpx'
					}
				],
				listImg: [{
						image: '',
						title: ''
					},
					{
						image: '',
						title: ''
					},
					{
						image: '',
						title: ''
					}
				],
				list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				]
			};
		},
		onShow() {
			this.ind = 1
			this.initObj()
			this.StartData()
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		onHide() {
			this.booksValue = ''
		},
		onLoad(options) {
			this.ind = 1
			uni.setStorageSync('shop_id', options.shop_id || '')
			uni.setStorageSync('code', options.parent_id || '')
		},
		methods: {

			ringUp() {
				uni.makePhoneCall({
					phoneNumber: '13855129561' //仅为示例
				})
			},
			// /点击了轮播图
			swips(e) {
				console.log(e, '5555555');
				// this.listImg[e]
				uni.setStorageSync('imgList', JSON.stringify(this.listImg))
				uni.navigateTo({
					url: `/pageC/detils?stu=2&status=${e}`
				})
			},
			// 点击借阅规则
			BorrowingRules() {
				uni.navigateTo({
					url: '/pageC/detils?name=borrow_rule'
				})
			},
			// 点击分类
			tabBarSwi(index) {
				uni.setStorageSync('tabsNum', index + 1)
				uni.switchTab({
					url: '/pages/SelectedBooks/index' //
				})
			},
			// 这个是上面的扫码
			bigSmall() {
				uni.scanCode({
					success: async (res) => {
						// console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						let n = await this.$api.BorrowsConfirm({
							book_no: res.result
						})
						// this.$msg(n.message)
						if (n.status) {
							// /如果能通过就跳转
							uni.navigateTo({
								url: '/pages/index/ConfirmationPage?code=' + res.result
							})
						} else {
							this.$msg(n.message)
						}
					}
				});
				// uni.navigateTo({
				// 	url: '/pages/index/drillingSelection'
				// })
			},
			async StartData() {
				let n = await this.$api.Setup()
				uni.setStorageSync('setup', n.data)
				uni.setStorageSync('domain', n.data.qiniu_config.domain)
				uni.setStorageSync('upload_token', n.data.qiniu_config.upload_token)
				uni.setStorageSync('upload_domain', n.data.qiniu_config.upload_domain)
			},
			async login() {
				let n = await this.$api.Login({
					// auth_code: res.code,
					code: 'test',
					// mobile_code: e.detail.code,
					shop_id: uni.getStorageSync('shop_id') || '',
					parent_id: uni.getStorageSync('code') || ''
				})
				uni.setStorageSync('token', n.data.token)
			},
			async initObj() {
				let n = await this.$api.Home()
				console.log(n, '123');
				this.obj = n.data
				// 这个是滚动通知
				let lists = []
				n.data.notices.forEach(item => lists.push(item.content))
				this.list = lists
				// 轮播图
				this.listImg = n.data.banners
				// 主题书单
				this.navList = n.data.categories
				this.heGroupList = n.data.flash_sale_activities
				// 下m面的线上课堂
				this.parentList = n.data.classrooms
				// 推荐书籍列表
				this.booksList = n.data.recommend_books
				// 新书推荐
				this.newBooksList = n.data.recommend_books
			},
			// 点击上语
			shangyu() {
				// uni.navigateTo({
				// 	url: '/pageA/SelectStore'
				// })
			},
			// 跳转到门店活动
			stoerAct(item) {
				uni.navigateTo({
					url: '/pages/index/StoreActivity?id=' + item.id
				})
			}, // 扫码借阅
			CodetoBorrow() {
				uni.navigateTo({
					url: '/pages/index/BorrowNow'
				})
			},
			notification() {
				uni.navigateTo({
					url: '/pages/index/Announcement'
				})
			},
			// 跳转到家长课堂
			parent(item) {
				uni.navigateTo({
					url: '/pages/index/ParentClass?id=' + item.id
				})
			},
			// /跳转到书籍
			givMi() {
				uni.navigateTo({
					url: '/pages/index/Books?q=' + this.booksValue
				})
			},
			// 切换
			qieHuan(num) {
				this.ind = num
				if (num == 1) {
					this.heGroupList = this.obj.flash_sale_activities
				} else if (num == 2) {
					this.heGroupList = this.obj.groupon_activities
				}
			},
			// 跳转引导页
			yindao() {
				uni.navigateTo({
					url: '/pageA/Introduction'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.support {
		text-align: center;
		margin: 30rpx 0;
		color: #999999;
	}

	.rightSlide {
		width: 100%;
		background-color: #fff;
		height: 392rpx;
		padding-left: 5%;
		overflow-x: auto;

		.slideItem {
			width: 360rpx;
			height: 392rpx;
			// background: pink;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-basis: 360rpx;
			flex-shrink: 0;
			overflow: hidden;

			.botBtn {
				.online {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #333333;
				}

				.intro {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #999999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.bgImg {
				width: 100%;
				height: 240rpx;

				.bgImgsss {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}

	.rightSlide::-webkit-scrollbar {
		display: none
	}

	.parenClass {
		width: 100%;
		background-color: #fff;

		.homeTit {
			width: 90%;

			.rig {
				width: 22%;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #999999;

				.rightJian {
					width: 12rpx;
					height: 22rpx;
				}
			}
		}

		.topName {
			width: 100%;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
		}
	}

	.storeActivity {
		background-color: #fff;

		.tabCount {
			height: 380rpx;
			width: 90%;
			overflow-y: auto;
			// background-color: pink;

			.countItem {
				border-bottom: 2rpx solid #f0f0f0;

				.time {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #999999;
				}

				.xian {
					width: 4rpx;
					height: 26rpx;
					background: #009d85;
				}

				.title {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #333333;
				}

				&:last-child {
					border-bottom: none;
				}

			}


		}



		.tabQie {
			width: 70%;
			height: 82rpx;
			background: #f8f8f8;
			border-radius: 36rpx;

			.tabItem {
				width: 48%;
				height: 100%;
				border-radius: 28rpx;
				color: #999999;
			}

			.active {
				background-color: #fff;
				color: #009d85;
			}
		}

		.topName {
			width: 90%;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
		}
	}

	.bg {
		height: 30rpx;
		width: 100%;
	}

	.scanTheCode {
		width: 90%;

		.codeLeft,
		.codeRight {
			width: 50%;
			height: 160rpx;
			background: #fff8f4;
			border-radius: 24rpx;

			.codeImg {
				width: 56rpx;
				height: 56rpx;
			}

			.rightImg {
				width: 12rpx;
				height: 20rpx;
			}

			.cenName {
				.fast {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #999999;
				}

				.books {
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #333333;
				}
			}
		}

		.codeRight {
			width: 50%;
			height: 160rpx;
			background: #f2fbf8;
			border-radius: 24rpx;
		}
	}

	.tabBar {
		.item {
			width: 25%;
			margin-bottom: 50rpx;
		}
	}

	.categories {
		width: 90%;
		margin: 0 auto;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;
	}

	.swipImg {
		width: 90%;
		height: 296rpx;
	}

	.notification {
		width: 90%;
		margin-bottom: 20rpx;
	}

	/deep/ .u-type-success-light-bg {
		background-color: transparent;
	}

	/deep/ .u-type-success {
		color: #000;
	}

	/deep/ .u-notice-bar {
		padding: 0 !important;
	}

	.swip {
		background-color: #fff;
		width: 100%;

		.swipTop {
			width: 90%;
			margin-bottom: 35rpx;

			.swipRight {
				width: 46rpx;
				height: 42rpx;
			}

			.swipLeft {
				position: relative;
				width: 78%;

				.duihao {
					position: absolute;
					width: 30rpx;
					height: 32rpx;
					left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
				}

				.sceh {
					width: 100%;
					height: 72rpx;
					background: #f6f6f6;
					border-radius: 36rpx;
					padding-left: 80rpx;
				}
			}
		}
	}

	.topHeacd {
		height: 70rpx;
	}

	.biaoti {
		height: 90rpx;
		width: 100%;
		// background-color: pink;

		.avar {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
		}

		.name {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}
	}

	.userAvar {
		position: fixed;
		top: 0%;
		left: 0;
		height: 180rpx;
		width: 100%;
		background-color: #fff;
		z-index: 99;
	}

	.container {
		height: 100vh;
		width: 100%;
		padding-top: 180rpx;
		overflow-y: auto;
	}
</style>